<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('排班设置')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>

    <link th:href="@{/testDate/main.css}" rel='stylesheet'/>
    <link th:href="@{/assets/libs/layui/css/layui.css}" media="all" rel="stylesheet">

    <style>
        .ui-layout-resizer {
            display: none!important;
        }
        .table-striped {
            min-height: auto;
        }
        .fc .fc-button {
            height: auto;
        }
        .el-table .cell {
            text-align: center;
        }
        .fc-event-time, .fc-event-title {
            color: #fff;
        }
        #ztreeBox {
            height: auto!important;
        }
        [v-cloak] {
            display: none;
        }
        .planItems {
            width: 100%;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        #planBox {
            height: 615px;
        }
        .el-input.is-disabled .el-input__inner {
            color: #000000!important;
        }
    </style>
</head>
<body class="gray-bg" style="overflow: scroll!important">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa fa-navicon"></i> 部门
                </div>
                <div class="box-tools pull-right">
                    <a type="button" class="btn btn-box-tool menuItem" href="#" onclick="dept()" title="部门管理">
                        <i class="fa fa-edit"></i>
                    </a>
                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display :none">
                        <i class="fa fa-chevron-up"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠">
                        <i class="fa fa-chevron-down"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门">
                        <i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
            <div class="ui-layout-content" id="ztreeBox">
                <div id="tree" class="ztree"></div>
            </div>
            <div class="box-header">
                <div class="box-title">
                    <i class="fa fa-navicon"></i> 班次
                </div>
            </div>
            <div class="ui-layout-content" id="planBox">
                <div v-for="(item, index) in planList" :key="index" class="planItems">
                    <div style="font-size: 16px" v-cloak>{{item.planName}}</div>
                    <input type="color" v-model="item.color" style="width: 45%;height: 35px" disabled="true">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-div ui-layout-center">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="user-form">
                <input type="hidden" id="deptId" name="deptId">
                <input type="hidden" id="parentId" name="parentId">
                <div class="select-list">
                    <ul>
                        <li v-if="checkedSearch.indexOf('登录名称') != -1">
                            登录名称：<input type="text" name="loginName"/>
                        </li>
                        <li v-if="checkedSearch.indexOf('用户名称') != -1">
                            用户名称：<input type="text" name="userName"/>
                        </li>
                        <li v-if="checkedSearch.indexOf('手机号码') != -1">
                            手机号码：<input type="text" name="phonenumber"/>
                        </li>
                        <li v-if="checkedSearch.indexOf('用户状态') != -1">
                            用户状态：
                            <select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li class="select-time" v-show="checkedSearch.indexOf('创建时间') != -1">
                            <label>创建时间：</label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            <a class="btn btn-success btn-rounded btn-sm" @click="moreSearch()"><i class="fa fa-edit"></i>&nbsp;更多</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <el-dialog title="搜索条件" width="200px" :visible.sync="showMore" append-to-body="true">
            <el-row>
                <el-col :span="24">
                    <el-checkbox style="margin-left: 28px" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <el-checkbox-group v-model="checkedSearch" @change="handleCheckedSearchChange">
                        <el-checkbox style="display: block;margin-left: 28px" v-for="item in searches" :label="item" :key="item" v-cloak>{{item}}</el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
        </el-dialog>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap"></table>
        </div>

        <div class="col-sm-12 search-collapse">
            <div id='calendar'></div>
        </div>

        <el-dialog title="班次列表" width="80%" :visible.sync="dialogTableVisible" append-to-body="true">
            <el-row>
                <el-col :span="24">
                    <el-table border size="small" ref="multipleTable" height="300" highlight-current-row @current-change="handleSelectionChange" :data="item.list">
                        <el-table-column property="pid" label="编号"></el-table-column>
                        <el-table-column property="planName" label="班次名称"></el-table-column>
                        <el-table-column property="planType" label="班次类型"></el-table-column>
                        <el-table-column property="periodTime" label="起止时间"></el-table-column>
                        <el-table-column property="totalTime" label="总时间（小时）"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row style="margin-top: 10px;text-align: center">
                <el-button size="mini" type="primary" @click="commitItems">确定</el-button>
                <el-button size="mini" type="info" @click="toggleSelection">取消</el-button>
            </el-row>
        </el-dialog>

        <el-dialog title="查看详情" width="410px" :visible.sync="showMsg" append-to-body="true">
            <el-row>
                <el-form :inline="true" label-width="100px" :model="msgInfo" class="demo-ruleForm">
                    <el-input v-model="msgInfo.id" type="hidden"></el-input>
                    <el-form-item size="small" label="用户:">
                        <el-input style="width: 220px" v-model="msgInfo.user" disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item size="small" label="班次:">
                        <el-select style="width: 220px" v-model="msgInfo.pid" :disabled="alterState">
                            <el-option v-for="(item, index) in planList" :key="index" :label="item.planName" :value="item.pid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item size="small" label="开始日期:">
                        <el-date-picker v-model="msgInfo.startStr" :clearable="false" :disabled="alterState" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item size="small" label="结束日期:">
                        <el-date-picker v-model="msgInfo.endStr" :clearable="false" :disabled="alterState" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row style="margin-top: 10px;text-align: center">
                <el-button v-if="showButton" size="mini" type="primary" @click="alterMsg">修改</el-button>
                <el-button v-if="showButton" size="mini" type="info" @click="delMsg">删除</el-button>
                <el-button v-if="!showButton" size="mini" type="primary" @click="yesMsg">确定</el-button>
                <el-button v-if="!showButton" size="mini" type="info" @click="noMsg">取消</el-button>
            </el-row>
        </el-dialog>
    </div>
</div>

<script type="text/javascript" th:src="@{/testDate/main.js}"></script>
<script type="text/javascript" th:src="@{/testDate/locales-all.js}"></script>
<script type="text/javascript" th:src="@{/assets/libs/layui/layui.all.js}"></script>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>

<script th:inline="javascript">
    var prefix = ctx + "system/user";
    var editFlag = [[${@permission.hasPermi('system:user:edit')}]];

    var vm = new Vue({
        el: '#planBox',
        data: {
            planList: []
        },
        created(){
            var that = this;
            $.ajax({
                cache: true,
                url: '/planset/List',
                type: 'POST',
                data: {},
                async: false,
                error: function(request){
                    $.modal.alertError("系统错误");
                },
                success: function(data){
                    for(let i = 0; i < data.rows.length; i++){
                        if(data.rows[i].planType == 1){
                            data.rows[i].planType = "白班";
                        }else if(data.rows[i].planType == 2){
                            data.rows[i].planType = "夜班";
                        }
                    }
                    that.planList = data.rows;
                }
            })
        }
    })

    const searchOptions = ['登录名称', '用户名称', '手机号码', '用户状态', '创建时间'];

    var app = new Vue({
        el: '.container-div',
        data: {
            dialogTableVisible: false,
            item: {
                list: [],
                selectItem: [],
            },
            events: [],
            user: '',
            start: '',
            end: '',
            showMsg: false,
            msgInfo: {},
            planList: vm.planList,
            alterState: true,
            showButton: true,
            showMore: false,
            checkAll: false,
            checkedSearch: ['登录名称', '用户名称', '手机号码', '用户状态'],
            searches: searchOptions,
            isIndeterminate: true
        },
        methods: {
            getPlan: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    url: '/planset/List',
                    type: 'POST',
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        for(let i = 0; i < data.rows.length; i++){
                            if(data.rows[i].planType == 1){
                                data.rows[i].planType = "白班";
                            }else if(data.rows[i].planType == 2){
                                data.rows[i].planType = "夜班";
                            }
                        }
                        that.item.list = data.rows;
                    }
                })
            },

            toggleSelection(rows){
                this.dialogTableVisible = false;
                this.selectItem = [];
            },

            handleSelectionChange(item){
                this.selectItem = item;
            },

            commitItems: function(){
                var that = this;
                if(this.selectItem == undefined){
                    $.modal.alertWarning("请选择班次");
                    return;
                }else{
                    var detail = {
                        title: this.user,
                        start: this.start,
                        pId: this.selectItem.pid
                    }
                    if(this.end != ''){
                        detail.end = this.end;
                    }else{
                        detail.end = this.start;
                    }
                    this.toggleSelection();
                    $.ajax({
                        cache: true,
                        url: '/calendar/insert',
                        type: 'POST',
                        data: {
                            title: detail.title,
                            start: detail.start,
                            pId: detail.pId,
                            end: detail.end
                        },
                        async: false,
                        error: function(request){
                            $.modal.alertError("系统错误");
                        },
                        success: function(data){
                            if(data.code == web_status.SUCCESS){
                                location.reload();
                            }else if(data.code == web_status.WARNING){
                                $.modal.alertWarning(data.msg);
                            }else{
                                $.modal.alertError(data.msg);
                            }
                        }
                    })
                }
            },

            alterMsg: function(){
                this.alterState = false;
                this.showButton = false;
                this.msgInfo = JSON.parse(JSON.stringify(this.msgInfo));
            },

            delMsg: function(){
                var that = this;
                layer.alert("确定进行该操作吗？", {
                    title: "系统提示",
                    btn: ['确定','取消'],
                    yes: function(index, layero){
                        $.ajax({
                            cache: true,
                            type: "POST",
                            url: '/calendar/remove',
                            data: {
                                ids: that.msgInfo.id
                            },
                            async: false,
                            error: function(request){
                                $.modal.alertError("系统错误");
                            },
                            success: function(data){
                                layer.close(index);
                                location.reload();
                            }
                        })
                    }
                });
            },

            yesMsg: function(){
                var that = this;
                for(let a = 0; a < app.planList.length; a++){
                    if(app.planList[a].pid == this.msgInfo.pid){
                        this.msgInfo.color = app.planList[a].color;
                    }
                }
                var a = new Date(this.msgInfo.startStr);
                var b = new Date(this.msgInfo.endStr);
                if(a > b){
                    $.modal.alertError("结束日期小于开始日期");
                }else{
                    this.msgInfo.endStr = getNextDate(this.msgInfo.endStr, 1);
                    $.ajax({
                        cache: true,
                        url: '/calendar/edit',
                        type: 'POST',
                        data: {
                            id: that.msgInfo.id,
                            title: that.msgInfo.user,
                            start: that.msgInfo.startStr,
                            pId: that.msgInfo.pid,
                            end: that.msgInfo.endStr
                        },
                        async: false,
                        error: function(request){
                            $.modal.alertError("系统错误");
                        },
                        success: function(data){
                            if(data.code == web_status.SUCCESS){
                                location.reload();
                            }else if(data.code == web_status.WARNING){
                                $.modal.alertWarning(data.msg);
                            }else{
                                $.modal.alertError(data.msg);
                            }
                        }
                    })
                }
            },

            noMsg: function(){
                this.showMsg = false;
                this.alterState = true;
                this.showButton = true;
            },

            moreSearch(){
                this.showMore = true;
            },
            handleCheckAllChange(val){
                this.checkedSearch = val ? searchOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedSearchChange(value){
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.searches.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.searches.length;
            }
        },
        created(){
            var that = this;
            $.ajax({
                cache: true,
                url: '/calendar/findList',
                type: 'POST',
                data: {},
                async: false,
                error: function(request){
                    $.modal.alertError("系统错误");
                },
                success: function(data){
                    for(let x = 0; x < data.rows.length; x++){
                        data.rows[x].start = data.rows[x].start.slice(0, 10);
                        data.rows[x].end = data.rows[x].end.slice(0, 10);
                    }
                    that.events = data.rows;
                }
            })
        }
    })

    document.addEventListener('DOMContentLoaded', function(){
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                // right: 'dayGridMonth,timeGridWeek,timeGridDay'
                right: 'dayGridMonth'
            },
            locale: 'zh-cn', //设置中文
            // initialDate: '2020-09-12',
            // navLinks: true, // can click day/week names to navigate views
            // businessHours: true, // 区分工作时间
            editable: false, //Event是否可被拖动或者拖拽
            selectable: true, //dataClick生效,设置是否可被单击或者拖动选择
            // displayEventEnd: true,
            displayEventTime: false, //是否显示时间
            // allDaySlot: false, //周、日视图时allDay不显示
            // slotLabelFormat: {
            //     hour: '2-digit',
            //     minute: '2-digit',
            //     meridiem: false,
            //     hour12: false //设置时间为24小时
            // },
            events: app.events,
            dateClick: function(info){
                openLayer(info);
            },
            select: function(info){
                if(info.endStr.split('-')[2] - info.startStr.split('-')[2] != 1){
                    openLayer(info);
                }
            },
            eventClick: function(event, jsEvent, view){
                openMsg(event);
            }
        });
        calendar.render();
    });

    function openMsg(info){
        app.showMsg = true;
        app.msgInfo.id = info.event.id;
        app.msgInfo.user = info.event.title;
        for(let z = 0; z < app.planList.length; z++){
            if(app.planList[z].color == info.event.backgroundColor){
                app.msgInfo.pid = app.planList[z].pid;
            }
        }
        app.msgInfo.startStr = info.event.startStr;
        if(info.event.endStr == ''){
            app.msgInfo.endStr = info.event.startStr;
        }else{
            app.msgInfo.endStr = getNextDate(info.event.endStr, -1);
        }
    }

    function openLayer(info){
        var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);
        if(rows.length == 0){
            $.modal.alertWarning("请先选择用户");
            return;
        }else if(rows.length > 1){
            $.modal.alertWarning("请为一个用户进行操作");
            return;
        }else{
            app.dialogTableVisible = true;
            app.getPlan();
            app.user = rows[0];
            if(info.dateStr == undefined){
                app.start = info.startStr;
                app.end = info.endStr;
            }else{
                app.start = info.dateStr;
            }
        }
    }

    function getNextDate(date, day){
        var dd = new Date(date);
        dd.setDate(dd.getDate() + day);
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
        return y + "-" + m + "-" + d;
    };

    $(function () {
        var panehHidden = false;
        if($(this).width() < 769){
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 185});
        queryUserList();
        queryDeptTree();
    });

    function queryUserList(){
        var options = {
            url: prefix + "/list",
            uniqueId: "userName",
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'userId',
                    title: '用户ID',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'loginName',
                    title: '登录名称',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'userName',
                    title: '用户名称',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'dept.deptName',
                    title: '部门',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'email',
                    title: '邮箱',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'phonenumber',
                    title: '手机',
                    align: 'center',
                    visible: true
                },
                {
                    visible: editFlag == 'hidden' ? false : true,
                    title: '用户状态',
                    align: 'center',
                    formatter: function(value, row, index){
                        return statusTools(row);
                    }
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                    align: 'center',
                    sortable: true
                }
            ]
        };
        $.table.init(options);
    }

    function queryDeptTree(){
        var url = ctx + "system/dept/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick
        };
        $.tree.init(options);
        function zOnClick(event, treeId, treeNode){
            $("#deptId").val(treeNode.id);
            $("#parentId").val(treeNode.pId);
            $.table.search();
        }
    }

    $('#btnExpand').click(function(){
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function(){
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function (){
        queryDeptTree();
    });

    /* 用户管理-部门 */
    function dept(){
        var url = ctx + "system/dept";
        createMenuItem(url, "部门管理");
    }

    /* 用户状态显示 */
    function statusTools(row){
        if(row.status == 1){
            return '停用';
        }else{
            return '正常';
        }
    }
</script>
</body>
</html>
